<template>
  <div style="margin-bottom:20px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div style="font-size:2.2rem;text-align:left;color:#494949;white-space: nowrap;">{{ head_title }}</div>
      </el-col>
      <el-col
        :span="6"
        :offset="12"
        style="white-space: nowrap;"
      >
        <el-button
          round
          class="process-button"
        >Export</el-button>
        <el-button
          round
          class="process-button"
        >Import</el-button>
        <img class="excel-button" :src="require('@/assets/system_config/excel.png')" />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col
        :span="6"
        :offset="0"
      >
        <slot name="header_left_bottom">
          <div style="font-size:1.2rem;text-align:right;color:transparent;white-space: nowrap;">.</div>
        </slot>
      </el-col>
      <el-col
        :span="12"
        :offset="6"
      >
        <div style="font-size:1.2rem;text-align:right;color:#494949;white-space: nowrap;">Latest change Log:{{ log }}</div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.excel-button {
  width: 42px;
  height: 42px;
  color: rgba(0, 0, 0, 0);
  background-color: transparent;
  border: 0;
  float: right;
  margin-top: 15px;
}
.excel-button:focus {
  outline: 0 !important;
}
.excel-button:active {
  // background-image: url("/static/img/system_config/1.png");
}
.el-button {
  color: #14d288;
  background: #f1f3f4;
  border-color: #14d289ab;
  font-size: 1.2rem;
  border-width: 2px;
  float: right;
  margin: 10px 10px 0px;
}
.el-button:focus {
  color: white;
  background: #14d288;
  border-color: #14d288;
}
.el-button:hover {
  color: white;
  background: #14d288;
  border-color: #14d288;
}
.el-button:active {
  color: white;
  background: rgb(12, 160, 115);
  border-color: rgb(12, 160, 115);
}
</style>
<script>
export default {
  props: {
    head_title: {
      type: String
    }
  },
  data () {
    return {
      log: "updated by Bai Xiaoran,2019/03/15,11:00AM",
    }
  }
}
</script>
